<!-- eslint-disable -->
<template>
  <el-form :model="props.formItem" label-width="100" class="p-2 ">
    <el-form-item label="类型">
      <el-radio-group v-model="props.formItem.type" class="ml-4" @change="(type)=>{ dateTypeChange(type,props.formItem) }">
        <el-radio label="daterange">daterange</el-radio>
        <el-radio label="datetimerange">datetimerange</el-radio>
        <el-radio label="monthrange">monthrange</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="标签名称">
      <el-input v-model.trim="props.formItem.label" />
    </el-form-item>
    <el-form-item label="表单字段" required prop="field" >
      <el-input v-model.trim="props.formItem.field" />
    </el-form-item>
    <el-form-item label="栅格宽度">
      <el-input v-model.number="props.formItem.col" placeholder="默认24" />
    </el-form-item>
    <FormRulesConfig :form-item="props.formItem" />
    <el-form-item label="数据格式">
      <el-input v-model="props.formItem.valueFormat" />
    </el-form-item>
    <el-form-item label="展示格式">
      <el-input v-model="props.formItem.format" />
    </el-form-item>
    <el-form-item label="日期禁用类型">
      <el-radio-group v-model="props.formItem.disabledDateType">
        <el-radio label="before">禁用当天之前</el-radio>
        <el-radio label="after">禁用当天之后</el-radio>
        <el-radio :label="null">无</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="分隔符">
      <el-input v-model="props.formItem.rangeSeparator" placeholder="请输入"/>
    </el-form-item>
    <el-form-item label="是否可清除">
      <el-switch v-model="props.formItem.clearable" />
    </el-form-item>
    <el-form-item label="是否只读">
      <el-switch v-model="props.formItem.readonly" />
    </el-form-item>
    <el-form-item label="取消日期联动">
      <el-switch v-model="props.formItem.unlinkPanels" />
    </el-form-item>
    <el-form-item label="是否禁用">
      <el-switch v-model="props.formItem.disabled" />
    </el-form-item>
    <el-form-item label="是否在body下">
      <el-switch v-model="props.formItem.teleported" />
    </el-form-item>
    <el-form-item label="开始占位文字">
      <el-input v-model="props.formItem.startPlaceholder" placeholder="开始时间" />
    </el-form-item>
    <el-form-item label="结束占位文字">
      <el-input v-model="props.formItem.endPlaceholder" placeholder="结束时间" />
    </el-form-item>
    <el-form-item label="样式类名">
      <el-input v-model="props.formItem.className" placeholder="请输入" />
    </el-form-item>
    <el-form-item label="弹出窗类名">
      <el-input v-model="props.formItem.popperClass" placeholder="请输入" />
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts" name="DateRange">
import FormRulesConfig from './FormRulesConfig.vue'
import { nextTick } from 'vue'
const props = defineProps<{ formItem: SubmitFormSchema }>()
const dateTypeChange = (type, params) => {
  /*  eslint-disable-block */
  switch (type) {
    case 'daterange': {
      params.valueFormat = 'YYYY-MM-DD'
      params.format = 'YYYY-MM-DD'
      break
    }
    case 'datetimerange': {
      params.valueFormat = 'YYYY-MM-DD HH:mm:ss'
      params.format = 'YYYY-MM-DD HH:mm:ss'
      break
    }
    case 'monthrange': {
      params.valueFormat = 'YYYY-MM'
      params.format = 'YYYY-MM'
      break
    }
    default: {
      break
    }
  }
  params.show = false
  nextTick(() => {
    params.show = true
  })

  /*  eslint-disable-block */
}
</script>
